<template>
    <div class="page-content">
        <entity-manager apiPrefix="/sys/dict" :fields="fields" ref="entityManagerRef" operationsWidth="160px" :withNew="false">
            <template #buttons>
                <el-button type="primary" icon="plus" @click="showNew">新增</el-button>
            </template>
            <template #rowButtons="{ row }">
                <el-link type="primary" @click="goDetail(row)" class="mr-2" v-perm="'update'">详情</el-link>
                <el-link type="danger" v-show="row.status" class="mr-2" @click="updateStatus(row, 0)" v-perm="'update'">停用</el-link>
                <el-link type="success" v-show="!row.status" class="mr-2" @click="updateStatus(row, 1)" v-perm="'update'">启用</el-link>
                <el-link type="danger" @click="doDelete(row)" class="mr-2" v-perm="'delete'">删除</el-link>
            </template>
        </entity-manager>

        <dict-detail v-if="detailVisible" class="full-panel" :item="editingItem" @close="closeDetail" @reload="reload"/>
    </div>
</template>

<script setup>
import dictDetail from './dict-detail.vue'
import * as sysApis from '@/apis/sys'
import { ElMessage } from 'element-plus'
import * as _ from 'lodash'

const fields = [
    { label: '编码', prop: 'code', required: true },
    { label: '名称', prop: 'name', required: true },
    {
        label: '状态', prop: 'status', width: '80px', needNew: false, tagType: val => {
            return {
                text: val ? '启用' : '停用',
                type: val ? 'success' : 'danger'
            }
        }
    },
    { label: '备注', prop: 'remark' },
    { label: '创建时间', prop: 'createTime', width: '200px', needNew: false },
]
const entityManagerRef = ref()
const detailVisible = ref(false)

function reload() {
    entityManagerRef.value.reload()
}

function showNew() {
    editingItem.value = null
    detailVisible.value = true
}

const editingItem = ref()
function goDetail(row) {
    editingItem.value = row
    detailVisible.value = true
}

function closeDetail(val) {
    if (val) {
        entityManagerRef.value.reload()
    }

    detailVisible.value = false
}

function doDelete(row) {
    entityManagerRef.value.doDelete(row)
}

function updateStatus(row, status) {
    sysApis.updateDict({
        id: row.id,
        status
    }).then(() => {
        row.status = status
        ElMessage.success('操作成功')
    })
}

</script>

<style lang="scss" scoped>
.page-content {
    position: relative;
    height: 100%;
    box-sizing: border-box;

    .full-panel {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: #fff;
        z-index: 100;
    }
}
</style>